<template>
    <div>
      <el-container>
  <el-header>
    <img src="../assets/logo.png" alt=""> <span>后台管理系统</span> <el-button size="small" type="info" @click="tc">退出</el-button> 
  </el-header> 
  <el-container> 
    <el-aside :width="zd ?  '20px' :'200px' ">
        <header @click="zd=!zd">|||</header>
    <el-col> 
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      router
      active-text-color="#ffd04b"> 
      <el-submenu :index="item.id+''" v-for="item in list" :key="item.id">
        <template slot="title">
          <span>{{item.authName}}</span> 
        </template>
        <el-menu-item-group>
          <el-menu-item  v-for="ite in item.children" :key="ite.id" :index="'/'+ite.path">
              <span>{{ite.authName}}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-col>
    </el-aside>
    <el-main>
         <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

    </div>
</template>

<script>
import {AsideApi} from '@/http/api'
export default {

data() {
    return {
        list:[] ,  //侧边栏的数据
        zd:false,   //侧边栏折叠
    }
},
    mounted() {
        this.getlist() 
    },
    methods: {
        //获取侧边栏数据
        async getlist(){
             let res= await AsideApi()
             console.log(res) 
             this.list=res
        },
        //退出登录
        tc(){
           sessionStorage.removeItem("token")
           this.$router.push("/")
        }

    },
};
</script>

<style scoped >
.el-header{
    width: 100%;
    background: #333;
    color: white;
    height: 65px;
    line-height: 65px;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
}
img{
    width: 50px;
    height: 50px;
}
.el-aside{
     min-height: 600px;
     background: #545c64;
     overflow: hidden;
}
li{
    text-align: center;
}
header{
    background: #545c64;
    /* float: left; */
    padding-left: 10px;
    width: 200px;
    color: white;
}
</style>
